<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>套索工具</title>
    <style>
        .canvas {
            border: 1px solid rgb(170, 170, 170);
            cursor: pointer;
        }
        .mgTop {

            text-align: center;
        }
    </style>
    <script src="https://cdn.bootcss.com/fabric.js/2.2.3/fabric.min.js"></script>
{#    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>#}

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

</head>

<body style="padding-left: 10px;text-align:center;">
    <h1>套索工具</h1>
    <h2>正在编辑病人{{ bbb|safe }}的第{{ ccc|safe }}张CT切片</h2>
    <button onclick="paintMode()">画笔模式</button>
    <button onclick="pickMode()">拾取模式</button>
    <button onclick="sjg()">神经根标记</button>
    <button onclick="zjp()">椎间盘标记</button>
    <button onclick="ymn()">硬膜囊标记</button>
    <button onclick="del()">删除</button>


    <button onclick="reserve()">保存图像</button>

    <p>
    <center>
        <h2>注意：</h2>
        <p>点选轮廓后，点击按钮生成套索</p>
    </center>

    <center>
        <canvas id="freeCanvas" class="canvas"></canvas>
    </center>

    <script>
        var svg = new Image();
        var mx,my,nx,ny
        var pointx = []
        var pointy = []
        var str = "M"
        var canvas = new fabric.Canvas("freeCanvas", {
            isDrawingMode: true,
            selection: false,
            width: 512,
            height: 512,

        });
        localStorage.bbb={{bbb|safe}};
        localStorage.ccc={{ccc|safe}};
        canvas.freeDrawingBrush.width = 5

        fabric.Image.fromURL({{ aaa|safe }}, function (img) {
            img.scaleToHeight(512, false);  //缩放图片高度
            img.scaleToWidth(512, false);   //缩放图片宽度
            canvas.add(img);
        });

        canvas.on('mouse:down',function(ev){


            var pointer = canvas.getPointer(ev.e)
            mx = pointer.x
            my = pointer.y
            pointx.push(mx)
            pointy.push(my)
            str.concat("123")

            if (pointx.length==1) {
                str = str.concat(" " + mx.toString() + " " + my.toString())
            }
            if (pointx.length>1) {
                str = str.concat(" " + "L "+ mx.toString() + " " + my.toString())
            }


        });

        // canvas.on('mouse:move', function(ev){
        //
        // });


        function clearCanvas() {

        }

        function paintMode() {
            canvas.isDrawingMode = true;
        }

        function pickMode() {
            canvas.isDrawingMode = false;
        }

        function sjg() {

            str = str.concat(" Z")
            canvas.isDrawingMode = true;
            var path = new fabric.Path(str);
            path.set({fill:'', stroke: 'red'});
            canvas.add(path);
            str = "M"
            pointx = []
            pointy = []
            //canvas.freeDrawingBrush.color ='rgb(255,0,0)'
        }

        function zjp() {
            //canvas.freeDrawingBrush.color ='rgb(0,255,0)'
            str = str.concat(" Z")
            var path = new fabric.Path(str);
            path.set({fill: '', stroke: 'green'});
            canvas.add(path);
            str = "M"
            pointx = []
            pointy = []


        }

        function ymn() {
            //canvas.freeDrawingBrush.color ='rgb(0,0,255)'
            str = str.concat(" Z")
            var path = new fabric.Path(str);
            path.set({fill:'', stroke: 'blue'});
            canvas.add(path);
            str = "M"
            pointx = []
            pointy = []
        }

        function del() {
            var zhe = canvas.getActiveObject();
            canvas.remove(zhe);
        }

        function reserve() {
            var temp = canvas.toSVG();
            $.ajax({
                url: 'http://211.87.234.165:8888/dealed/',
                type:'post',
                processData: false, //jquery 是否对数据进行 预处理
                contentType: false, // 不要自己修改请求内容类型,
                data:JSON.stringify({
                    'text':temp,
                    'patient_id':localStorage.bbb,
                    'number':localStorage.ccc

                }),
                dataType:'json',
                 success: function(res,status,xhr){
                    if(res.code != 0){
                         alert("添加成功！");
                    }else{
                        alert("添加成功！");
                        //window.location.href = router_question_list_theory_url;
                    }
    　　          }
            })
            // var xmlHttp;
            // try {
            // // Firefox, Opera 8.0+, Safari
            // xmlHttp = new XMLHttpRequest();
            // }
            // catch (e) {
            // // Internet Explorer
            // try {
            // xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            // }
            // catch (e) {
            //
            // try {
            // xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            // }
            // catch (e) {
            // alert("您的浏览器不支持AJAX！");
            // return false;
            // }
            // }
            // }
            //
            // xmlHttp.onreadystatechange = function() {
            // if (xmlHttp.readyState == 4) {
            // //alert(xmlHttp.responseText);
            // var str = xmlHttp.responseText;
            // document.getElementById('show').innerHTML +=str;
            // //alert(str);
            // var obj = eval('('+ xmlHttp.responseText +')');
            // //var obj = eval(({"id":"123","name":"elar","age":"21"}));
            // alert(obj.name);
            // }
            // }
            // var data = "id=123";
            // xmlHttp.open("POST", "testJson.php", true);
            // xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            // xmlHttp.send("id="+temp);



        }

    </script>
</body>

</html>